
<template>
    <h3>toRefs 和toRef</h3>
    <h4>{{person}}</h4>
    <div>姓名：{{name}}</div>
    <div>年龄：{{age}}</div>
    <div>薪资：{{job.j1.salary}}K</div>
    <button @click="name+='~'">修改姓名</button>
    <button @click="age++">增长年龄</button>
    <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
    // toRef,toRefs  用于抽出对象属性，并且该属性变化的时候，源对象的属性也会跟着变。
    import {ref,reactive,toRef,toRefs} from 'vue'
    export default {
        name: 'ToRefAndToRefs',
        setup(){
            //数据
            let person = reactive({
                name:'张三',
                age:18,
                job:{
                    j1:{
                        salary:20
                    }
                }
            })

            // const name1 = person.name
            // console.log('%%%',name1)

            // 拿出来 某个对象身上的某个属性  变成响应式的数据
            // const name2 = toRef(person,'name')
            // console.log('####',name2)

            // 将某对象的所有属性 变成了 ref 声明的属性对象 解构出来的x 被ref 修饰具有 响应式
            const x = toRefs(person)
            console.log('******',x)

            //返回一个对象（常用） 感觉有用 又不是很有用
            return {
                person,
                // name:toRef(person,'name'),
                // age:toRef(person,'age'),
                // salary:toRef(person.job.j1,'salary'),
                // 简写上述
                ...toRefs(person)
            }
        }
    }
</script>

